<template>
  <div class="app">
    <div class="header">
      <router-link tag="span" to="./Home">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psb03b6j9hs947cmg2jvvf7tced3kqboag98fe75e4-504a-41e1-a374-8b622937315b"
      /></router-link>
      <span class="deng-biao">登录</span>
    </div>
    <div class="box_7 flex-row">
      <div class="text-group_8 flex-col justify-between">
        <span class="text_1">欢迎来到潮玩盲盒</span>
        <span class="text_2">乐享新体验！只为你制造惊喜！</span>
      </div>
    </div>
    <div class="dibu">
      <div class="tab">
        <span class="deng1" @click="isshow3 = 0" :class="{ col: isshow3 == 0 }"
          >账号登陆</span
        >
        <span class="deng2" @click="isshow3 = 1" :class="{ col: isshow3 == 1 }"
          >号码登录</span
        >
      </div>
      <div class="zhang1" v-show="isshow3 == 0">
        <p class="text1 w75">账号</p>
        <p class="text2">
          <input v-model="input1" type="text" placeholder="请输入账号" />
        </p>
        <p class="text3">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskbwty3ifd44f4dcvpkld2jjhcp3w12j85da52cd-8c59-4146-9fa2-1edb3a94a257"
          />
        </p>
      </div>
      <div class="zhang2" v-show="isshow3 == 0">
        <p class="text1 w75">密码</p>
        <p class="text2">
          <input v-model="input2" type="password" placeholder="请输入密码" />
        </p>
        <p class="text3">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskbwty3ifd44f4dcvpkld2jjhcp3w12j85da52cd-8c59-4146-9fa2-1edb3a94a257"
          />
        </p>
      </div>
      <div class="zhang1" v-show="isshow3 == 1">
        <p class="text1 w75">手机</p>
        <p class="text2">
          <input v-model="input1" type="text" placeholder="请输入手机号" />
        </p>
        <p class="text3">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskbwty3ifd44f4dcvpkld2jjhcp3w12j85da52cd-8c59-4146-9fa2-1edb3a94a257"
          />
        </p>
      </div>
      <div class="zhang2" v-show="isshow3 == 1">
        <p class="text1 w75">验证码</p>
        <div class="text2">
          <input
            v-model="input2"
            id="w75"
            type="text"
            placeholder="请输入验证码"
          />
          <p class="text4">获取验证码</p>
        </div>
        <p class="text3">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskbwty3ifd44f4dcvpkld2jjhcp3w12j85da52cd-8c59-4146-9fa2-1edb3a94a257"
          />
        </p>
      </div>
      <div class="button" @click="denglu">登录</div>
      <div class="zhuce">
        <router-link tag="p" to="./forget">忘记密码?</router-link>

        <router-link tag="p" to="./reg">注册账号</router-link>
      </div>
      <div class="zhengce">
        <input type="checkbox" class="z1" />
        <span class="z2"
          >登录/注册表示同意
          <router-link tag="a" to="./xieyi">《用户协议》</router-link>和</span
        ><router-link tag="a" to="./yinsi">《隐私政策》</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      isshow3: 0,
      input1: "",
      input2: "",
    };
  },
  methods: {
    denglu() {
      let z1 = document.querySelector(".z1");
      if (z1.checked == true) {
        let phone = this.input1;
        let password = this.input2;
        axios
          .post("/api/api/userlogin/loginname.do", {
            password,
            phone,
          })
          .then((res) => {
            console.log(res);
            alert(res.data.msg);
            if (res.data.code == 200 || 400) {
              localStorage.setItem("shouji", phone);
              location.href = "./home/homes";
            }
            // location.href = "./home/homes";
          });
      } else {
        alert("不同意就滚");
      }
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.85rem;
  background-color: rgba(255, 255, 255, 1);
}
.image_2 {
  width: 0.16rem;
  height: 0.3rem;
  margin: 0.28rem 0 0 0.45rem;
}
.deng-biao {
  /* width: 0.69rem;
  height: 0.34rem; */
  color: rgba(68, 67, 67, 1);
  font-size: 0.36rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  line-height: 0.85rem;
  margin: 0.27rem 3rem 0 2.8rem;
}
.box_7 {
  width: 100%;
  height: 4.48rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psg1x157cndiebmxpq0j81fmqqcwtj5ef4466f257-fc1f-45a0-8cb8-288a0c80c7dd) -0.01rem
    0rem no-repeat;
  background-size: 100% 4.48rem;
  display: flex;
}

.text-group_8 {
  width: 4.3rem;
  height: 1.03rem;
  margin: 2.02rem 0 0 0.27rem;
  display: flex;
  flex-direction: column;
}

.text_1 {
  width: 4.28rem;
  height: 0.52rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.54rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.54rem;
  margin-left: 0.4rem;
}

.text_2 {
  width: 3.72rem;
  height: 0.27rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.28rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.28rem;
  margin-top: 0.49rem;
  margin-left: 0.4rem;
}
.dibu {
  width: 100%;
  height: 9.59rem;
  background: white;
  border-radius: 0.5rem 0.5rem 0.1rem 0.1rem;
}
.tab {
  width: 100%;
  height: 1.5rem;
  padding-top: 0.5rem;
}
.deng1 {
  color: rgba(155, 155, 155, 1);
  font-size: 0.36rem;
  font-family: PingFangSC-Medium;
  margin-left: 1.2rem;
  margin-top: 0.5rem;
}
.deng2 {
  color: rgba(155, 155, 155, 1);
  font-size: 0.36rem;
  font-family: PingFangSC-Medium;
  margin-left: 0.75rem;
  margin-top: 0.5rem;
}
.zhang1,
.zhang2 {
  margin-left: 1.2rem;
}
.w75 {
  width: 75%;
}
#w75 {
  width: 50%;
}

.text1 {
  font-size: 0.32rem;
}
.text2 {
  margin-top: 0.25rem;
  display: flex;
}
.text2 input {
  width: 75%;
}
.text4 {
  background-color: rgba(216, 236, 254, 0.7);
  border-radius: 0.19rem;
  opacity: 0.7;
  height: 0.39rem;
  width: 25%;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.39rem;
  margin-left: 0.5rem;
}
input {
  border: none;
}
.button {
  width: 5.37rem;
  height: 0.96rem;
  background: linear-gradient(-77deg, #b6dcff 0%, #b9b6e5 100%);
  border-radius: 0.48rem;
  margin: 0 auto;
  margin-top: 0.5rem;
  text-align: center;
  line-height: 0.96rem;
  font-size: 0.34rem;
}
.col {
  font-weight: 600;
  color: black;
}
.zhuce {
  width: 100%;
  display: flex;
}
.zhuce p:nth-child(1) {
  width: 50%;
  font-size: 0.3rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  margin-top: 0.6rem;
}
.zhuce p:nth-child(2) {
  width: 50%;
  font-size: 0.3rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  margin-top: 0.6rem;
}
.zhengce {
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
}
.z1 {
  width: 0.24rem;
  height: 0.24rem;
  border: 2px solid rgba(69, 67, 67, 1);
  margin-top: 0.01rem;
}
.zhengce span,
a {
  font-size: 00.24rem;
}
</style>
